<template>
  <div
    v-ripple
    class="v-menu-pos-item v-radius"
    :class="{ 'active-menu-pos': active }"
    @click="onClickMenuPos"
  >
    <span class="v-menu-pos-item-txt">{{ child.title }}</span>
    <div class="menu-pos-move v-radius" :class="{ 'active-menu-pos-move': active }"></div>
  </div>
  <template v-if="hasChild">
    <menu-item-pos v-for="_child of child.children" :child="_child" />
  </template>
</template>

<script lang='ts'>
import { computed, defineComponent, PropType, inject } from 'vue';
import { useRouter } from 'vue-router';
import { INavigationItem } from '@/interface';
import { IMessage } from "@/interface/IUse";

export default defineComponent({
  name: 'MenuItemPos',
  props: {
    activeNameItemPos: String,
    child: {
      type: Object as PropType<INavigationItem>,
      default: () => ({})
    }
  },
  emits: ['clickMenuItemPos'],
  setup(props, ctx) {
    const g_color = inject("$color");
    const router = useRouter();
    const $message: IMessage = inject('message') as IMessage;
    const hasChild = computed(() => props.child.children && props.child.children.length > 0);
    const active = computed(() => props.child.name === props.activeNameItemPos);
    const onClickMenuPos = (event: MouseEvent) => {
      event.stopPropagation();
      if (props.child.children && props.child.children.length > 0) {
        $message({ type: 'warning', content: '子跳转还没做' });
      } else {
        // 把子级的name扔出去
        ctx.emit('clickMenuItemPos', props.child.name);
        router.push({ name: props.child.name });
      }
    };
    return { hasChild, active, g_color, onClickMenuPos };
  }
});
</script>

<style scoped lang="scss">
.v-menu-pos-item {
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  transition: all 0.25s ease-out;
  overflow: hidden;
  color: v-bind(g_color);
}
.active-menu-pos-move {
  opacity: 0.3 !important;
}
.active-menu-pos {
  /*color: #409EFF !important;*/
  color: $primary-color !important;
}
.v-menu-pos-item:hover > .menu-pos-move {
  opacity: 0.3;
}
.menu-pos-move {
  width: 100%;
  height: 40px;
  opacity: 0;
  background-color: currentColor;
  transition: all 0.25s ease;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
</style>